<template>
  <div class="authInfo-box">
    <el-container class="container-box">
      <!-- 头部 -->
      <el-header height="auto">
        <el-form
          :inline="true"
          :label-width="labelWidth"
          ref="formData"
          :model="formData"
          class="formData-box"
        >
          <el-form-item
            label="授权状态"
            prop="authState">
            <el-select
              v-model="formData.authState"
              placeholder="请选择">
              <el-option
                v-for="(item,index) in searchParams"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="配送商"
            prop="supplierName">
            <el-input
              v-model="formData.supplierName"
              placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click.stop="onClear(formData)">
              <i class="iconfont el-icon-refresh-right"/>
              重置</el-button>
            <el-button
              :loading="submitLoading"
              type="primary"
              @click.stop="onSubmit"
              :class="{'isAddWidth':submitLoading}"
            >
              <i
                class="iconfont el-icon-search"
                :class="{'isdisplay':submitLoading}" />
              {{ submitLoading?'':'查询' }}</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!-- 内容 -->
      <el-editable
        class="editable-box"
        :data="tableData"
        v-loading="tableLoading"
        height="200px"
        :columns="attrColumns"
      >
        <!-- 序号 -->
        <template
          slot="default-num"
          slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
        <!-- 配送合同 -->
        <template
          slot="default-contract"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="lookContract(scope)"
            type="text">查看</el-button>
        </template>
        <!-- 授权产品 -->
        <template
          slot="default-product"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="lookProduct(scope)"
            type="text">查看</el-button>
        </template>
        <!-- 审核历史 -->
        <template
          slot="default-checkDetails"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="lookDetails(scope)"
            type="text">查看</el-button>
        </template>
        <!-- 操作 -->
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            v-if="scope.row.authState === 2"
            size="small"
            @click.stop="toPass(scope)"
            type="text"
          >通过</el-button>
          <el-button
            v-if="scope.row.authState === 2"
            size="small"
            @click.stop="toReject(scope)"
            type="text text-danger"
          >拒绝</el-button>
          <el-button
            v-if="scope.row.authState === 3"
            size="small"
            @click.stop="toStop(scope)"
            type="text text-danger"
          >停用</el-button>
        </template>
      </el-editable>
      <!-- 分页 -->
      <el-pagination
        align="right"
        style="margin-top:20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-size="page.size"
        :page-sizes="PAGE_NUMBER"
        :layout="PAGINATION_LAYOUT"
        :total="page.total"
      />
      <!-- 审核历史 -->
      <el-dialog
        class="areaTab"
        title="审核历史"
        :visible.sync="areaVisible"
        width="800px">
        <el-editable
          class
          :data="tableDatatHistoryVerify"
          height="300px"
          :columns="attrColumns1">
          <template
            slot="default-num"
            slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-editable>
      </el-dialog>
      <!-- 通过 -->
      <el-dialog
        class="areaTab"
        title="申请授权"
        :visible.sync="isShowPass"
        width="600px">
        <div class="tips-box">
          <span class="el-icon-warning pass" />
          <span>确定授权经销商" {{ supplierName }} "成为本院供应商?</span>
        </div>
        <div>
          <span>授权有效期：</span>
          <el-date-picker
            v-model="termOfValidity"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button @click="isShowPass = false">
            <i class="el-icon-circle-close"/>
            取消</el-button>
          <el-button
            type="primary"
            @click="onPass">
            <i class="el-icon-circle-check"/>
            确定</el-button>
        </span>
      </el-dialog>
      <!-- 拒绝 -->
      <el-dialog
        class="areaTab"
        title="申请拒绝"
        :visible.sync="isShowReject"
        width="600px">
        <div class="reject-box">
          <p>备注：</p>
          <el-input
            type="textarea"
            :rows="4"
            show-word-limit
            :maxlength="500"
            placeholder="请输入"
            v-model="rejectInfo"
          />
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button @click="isShowReject = false">
            <i class="el-icon-circle-close"/>
            取消</el-button>
          <el-button
            type="primary"
            @click="onReject">
            <i class="el-icon-circle-check"/>
            确定</el-button>
        </span>
      </el-dialog>
      <!-- 停用 -->
      <el-dialog
        class="areaTab"
        title="授权停用"
        :visible.sync="isShowStop"
        width="600px">
        <div class="tips-box">
          <span class="el-icon-warning stop" />
          <span>确定停用授权经销商" {{ supplierName }} "成为本院供应商?</span>
        </div>
        <div class="reject-box">
          <p>备注：</p>
          <el-input
            type="textarea"
            :rows="4"
            show-word-limit
            :maxlength="500"
            placeholder="请输入"
            v-model="rejectInfo"
          />
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button @click="isShowStop = false">
            <i class="el-icon-circle-close"/>
            取消</el-button>
          <el-button
            type="primary"
            @click="onStop">
            <i class="el-icon-circle-check"/>
            确定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import { fileUpload } from '@const/beforeSettleApi'
import paginationMixin from '@mixins/paginationMixin'
import ElEditable from '@components/el-editable/index.vue'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import { attrColumns, attrColumns1 } from './const.js'
import {
  DistributorList,
  searchChange,
  historyToexamine
} from '@const/beforeSettleApi.js'
import { formatDate } from '@const/filter.js'
import { hasIn } from 'lodash'
const imageLimit = 'application/pdf'
export default {
  name: 'CustomAttr',
  mixins: [paginationMixin],
  components: { ElEditable },
  data () {
    return {
      searchParams: [
        {
          label: '待审核',
          value: 2
        },
        {
          label: '已通过',
          value: 3
        },
        {
          label: '已拒绝',
          value: 5
        },
        {
          label: '已停用',
          value: 4
        }
      ],
      id: null,
      supplierName: '',

      isShowPass: false, // 审核通过弹框
      termOfValidity: null, // 授权有效期

      isShowReject: false, // 审核拒绝弹框
      rejectInfo: '',

      isShowStop: false, // 停用
      stopInfo: '',

      isShowAuth: false,
      filterableLoading: false,
      filterableOptions: [],
      authForm: {
        pdfUrl: '',
        time: [],
        hospital: '',
        categoryCode: ''
      },
      typeRules: {
        hospital: [{ required: true, message: '请选择', trigger: 'change' }],
        time: [{ required: true, message: '请选择', trigger: 'change' }],
        categoryCode: [{ required: true, message: '请输入', trigger: 'change' }],
        pdfUrl: [{ required: true, message: '请上传附件', trigger: 'change' }]
      },

      submitLoading: false, // 查询按钮的loading
      // 查询的条件数据
      formData: {
        authState: '',
        supplierName: ''
      },

      areaVisible: false, // 业务区域弹框
      labelWidth: '70px',

      PAGE_NUMBER, // 分页类型
      PAGINATION_LAYOUT,

      attrColumns, // 表头信息
      attrColumns1,
      // searchParams, // 搜索的下拉内容
      tableLoading: false,

      logDialog: false, // 列表的操作记录
      dialogLoading: false, // 操作记录的loading
      logTableData: [], // 操作历史的内容
      tableData: [],
      tableDatatHistoryVerify: []
    }
  },
  created () {
    this.initNavButtons()
    this.getList()
  },
  methods: {
    // 停用
    toStop (e) {
      this.isShowStop = true
      this.id = e.row.id
      this.supplierName = e.row.supplierName
    },
    // 确定停用
    onStop () {
      this.$axios({
        method: 'put',
        url: searchChange,
        data: {
          id: this.id,
          remark: this.rejectInfo, // 拒绝描述
          authState: 4
        }
      }).then(res => {
        if (res.data.code * 1 === 0) {
          this.$message({ message: '已拒绝', type: 'success' })
          this.getList()
        }
        this.isShowStop = false
        this.rejectInfo = ''
      })
    },
    // 拒绝
    toReject (e) {
      this.isShowReject = true
      this.id = e.row.id
    },
    // 确定拒绝
    onReject () {
      this.$axios({
        method: 'put',
        url: searchChange,
        data: {
          id: this.id,
          remark: this.rejectInfo, // 拒绝描述
          authState: 5
        }
      }).then(res => {
        if (res.data.code * 1 === 0) {
          this.$message({ message: '已拒绝', type: 'success' })
          this.getList()
        }
        this.isShowReject = false
        this.rejectInfo = ''
      })
    },
    // 通过
    toPass (e) {
      this.isShowPass = true
      this.supplierName = e.row.supplierName
      this.id = e.row.id
      this.termOfValidity = [e.row.validityFrom, e.row.validityTo]
    },
    // 确定通过
    onPass () {
      this.$axios({
        method: 'put',
        url: searchChange,
        data: {
          id: this.id,
          authState: 3,
          validityFrom: this.termOfValidity[0],
          validityTo: this.termOfValidity[1]
        }
      }).then(res => {
        if (res.data.code * 1 === 0) {
          this.$message({ message: '审核通过', type: 'success' })
          this.getList()
        }
        this.isShowPass = false
      })
    },
    // 查看配送合同
    lookContract (e) {
      this.$pdfViewer({ url: e.row.contractUrl, title: '配送合同' })
    },
    // 查看授权产品
    lookProduct (e) {
      this.$router.push({
        path:
          '/hospitalSide/channelManagement/auditHospital/auditProduct',
        query: {
          id: e.row.id,
          name: e.row.supplierName,
          contactNumber: e.row.contactNumber// 合同num
        }
      })
    },
    // 获取列表
    getList () {
      this.tableLoading = true
      this.submitLoading = true
      this.$axios
        .$get(DistributorList, {
          params: {
            ...this.formData,
            page: this.page.page,
            size: this.page.size,
            type: 1 // 1.院端  2经销商
          }
        })
        .then(res => {
          this.tableData = hasIn(res, 'payload.content')
            ? res.payload.content
            : []
          this.page.total = hasIn(res, 'payload.totalElements')
            ? res.payload.totalElements
            : 0
          this.tableLoading = false
        })
        .finally(res => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    // 查询
    onSubmit () {
      this.page.page = 1
      this.getList()
    },
    // 重置
    onClear () {
      this.$refs['formData'].resetFields()
    },
    // 分页
    handleSizeChange (size) {
      this.page.size = size
      this.getList()
    },
    handleCurrentChange (curPage) {
      this.page.page = curPage
      this.getList()
    },
    // 查看明细查看历史审核
    lookDetails (e) {
      this.areaVisible = true
      this.$axios
        .$get(historyToexamine, {
          params: {
            authId: e.row.id,
            authType: 1
          }
        })
        .then(res => {
          this.tableDatatHistoryVerify = hasIn(res, 'payload')
            ? res.payload
            : []
        })
    },

    toAuth () {
      this.$router.push({
        path:
          '/hospitalSide/channelManagement/auditHospital/distributeInvite'
      })
    },
    // 初始化 导航栏 按钮组
    initNavButtons () {
      let obj = {
        type: 'btn',
        arr: [
          {
            val: '配送邀请',
            type: 'primary',
            handle: this.toAuth
          }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    }
  }
}
</script>
<style lang="less">
.authInfo-box {
  .container-box {
    height: 100%;
    overflow: auto;

    .hospital-edit-box {
      flex: 1;
    }

    .base-form {
      margin-right: 40px;
    }

    .tips-box {
      display: flex;
      align-items: center;

      span:first-child {
        padding: 20px 0;
      }

      .pass {
        color: #49c0af;
        font-size: 30px;
        margin-right: 10px;
      }

      .stop {
        color: #d85365;
        font-size: 30px;
        margin-right: 10px;
      }
    }

    .reject-box {
      display: flex;

      p {
        width: 50px;
      }
    }
  }

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .tip-box {
    border: 1px solid #ccc;
    padding: 5px;

    .tip-uplader {
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      border-radius: 50%;
      margin: 10px auto;
      line-height: 50px;
      font-size: 18px;
    }

    .tip-font {
      font-size: 12px;
      color: #aaa;
    }
  }

  .ipt {
    width: 211px;
  }
}
</style>
